<!DOCTYPE html>
<html data-layout-decorate="~{fragment/layout}">
<head>
<meta charset="UTF-8">
<title>课程列表</title>
<link rel="stylesheet" data-th-href="@{../static/bootstrap/css/bootstrap-theme.css}">
<link rel="stylesheet" th:href="@{../webjars/bootstrap-table/1.9.1-1/bootstrap-table.css}">
<link rel="stylesheet" th:href="@{../webjars/bootstrap-select/2.0.0-beta1/dist/css/bootstrap-select.css}">
<link data-th-href="@{../webjars/bootstrapvalidator/css/bootstrapValidator.css}"	rel="stylesheet" />
<script data-th-src="@{../webjars/knockout/knockout.js}" type="text/javascript"></script>
<script	data-th-src="@{../webjars/knockout-mapping/2.4.1/knockout.mapping.js}" type="text/javascript"></script>
<script type="text/javascript" 	th:src="@{../webjars/bootstrap-select/2.0.0-beta1/dist/js/bootstrap-select.js}"></script>
<script type="text/javascript" th:src="@{../webjars/bootstrap-select/2.0.0-beta1/dist/js/i18n/defaults-zh_CN.js}"></script>
<script	data-th-src="@{../webjars/bootstrapvalidator/js/bootstrapValidator.js}"></script>
<script data-th-src="@{../webjars/bootstrap-table/bootstrap-table.js}"></script>
<script	data-th-src="@{../webjars/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script data-th-src="@{../webjars/bootbox/4.4.0/bootbox.js}"></script>
<script type="text/javascript" src="../static/bootstrap-table/knockout.bootstrapTable.ljc.js"></script>
<script type="text/javascript"data-th-src="@{../static/layDate-v5.0.9/laydate/laydate.js}"></script>
<script type="text/javascript">
$(function() {
	$('#kcmc').selectpicker({	//初始化下拉框
		title:'课程',
		width:'48%'
	}); 
	
	$('#banji').selectpicker({	//初始化下拉框
		title:'班级',
		width:'48%'
	});
	
	laydate.render({
		  elem: '#time'
		});
	
	laydate.render({
		  elem: '#overtime'
		});
		
})

function kcmc(value){
	$("#banji").empty(); 
	$.ajax({  
		// get请求地址  
		    url: 'kcmcchange?kcmc='+value,  
		    dataType: "json",  
		    success: function (data) {  
		    	$('#banji').append("<option style='display: none;'></option>");
		        for (var i = 0; i < data.length; i++) {  
		            $('#banji').append("<option value=" + data[i].tbclass + "> "+ data[i].tbclass +"</option>");  
		        }  
		        // 缺一不可  
		        $('#banji').selectpicker('refresh');  
		        $('#banji').selectpicker('render');
		    }  
		}); 
	}
	
function chaxun(){
	var kc = $("#kcmc").val();
	var banji = $("#banji").val();
	var time = $("#time").val();
	var overtime = $("#overtime").val();
		$.ajax({
			type: "post",
			url: "page1",
			data: {
				kc : kc,
				banji : banji,
				time : time,
				overtime : overtime
				},
			dataType:"json",
			success : function(json) {
				$("#mytable").bootstrapTable('load', json); }
			});
}

function export1() {
	var kc = $("#kcmc").val();
	var banji = $("#banji").val();
	var time = $("#time").val();
	var overtime = $("#overtime").val();
	$.post("export",{kc : kc,
		banji : banji,
		time : time,
		overtime : overtime});
}



function qingkong(){
	$.ajax({
		type: "post",
		url: "page1",
		data: {
			kc : null,
			banji : null,
			time : null,
			overtime : null
			},
		dataType:"json",
		success : function(json) {
			$("#mytable").bootstrapTable('load', json); 
		}
		});
}

</script>
</head>
<body>
<section layout:fragment="content">
	<div id="teacher_table_div" class="container-fluid">
	
		<!-- 查询窗口 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="myModal">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	            		<!-- 课程 -->
		            	<select id="kcmc" name="kcmc" onchange="kcmc(this.value);" data-live-search="true"  class="selectpicker">
							<option style="display: none;"></option>
							<option th:each="k:${course}" th:text="${k}" th:value="${k}"></option>
						</select>
						
						<!-- 班级 -->
						<select id="banji" name="banji" data-live-search="true" class="selectpicker">
							<option style="display: none;"></option>
						</select>
						 <div class="form-group">
	                        <label for="time">开始时间</label>
	                        <input id="time" class="form-control" data-live-search="true" data-style="btn-primary" name="time" placeholder="开始时间">
	                    </div>
	                    
	                    <div class="form-group">
	                        <label for="overtime">结束时间</label>
                        <input id="overtime" class="form-control" data-live-search="true" data-style="btn-primary" name="overtime"  placeholder="结束时间">
	                    </div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="chaxun();"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-toggle="modal" data-target="#myModal" type="button" id="tit"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
			</button>
			<button type="button" onclick="window.location.href='export'"
				class="btn btn-default">
				<span class="glyphicon glyphicon-export" aria-hidden="true" onclick="export1()"></span>导出
			</button>
			
		</div>
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root"></table>
	</div>
	
<!-- 以下是javascript内容 -->	
<script type="text/javascript">

	$('#mytable').bootstrapTable({
		url : 'page1',
		method : 'POST',
		dataType : 'json',
		contentType : "application/x-www-form-urlencoded",
		cache : false,
		striped : true,
		showRefresh : true,
		columns : [ {
			field : 'student',
			title : '姓名'
		},{
			field : 'banji',
			title : '班级'
		}, {
			field : 'kc',
			title : '课程'
		}, {
			field : 'ydcs',
			title : '应到次数'
		}, {
			field : 'sdcs',
			title : '实到次数'
		}, {
			field : 'cql',
			title : '出勤率'
		} ]
	})
</script>
</section>

</body>
</html>